<!-- 首页 -->
<template>
	<view class="home-wrap u-m-b-20">
			<!-- 导航栏 -->
			<!-- 自定义模块 -->
			<view class="template-box">
					<!-- 轮播 -->
					<sh-banner :list="headSwiperList" :height="500"></sh-banner>
				</block>
			</view>
            <view>
				<view>
					<!-- 会员权益 -->
<!--					<view class="vip_rights">-->
<!--						<view class="title">-->
<!--							<image src="../../static/images/home/vipRights.png" mode="aspectFill" class="vip_rights_img"></image>-->
<!--						</view>-->
<!--						<view class="logo_card">-->
<!--							<view class="card_box">-->
<!--								<view class="left">LOGO</view>-->
<!--								<view class="right" @tap="gotohuiyuan()" v-if="userInfo.nickname">-->
<!--									<view class="t0">会员等级：{{userLevelObj.level_name}}</view>-->
<!--									<view class="t1">点击查看</view>-->
<!--								</view>-->
<!--								<view class="right"  @tap="bindMobile" v-else>-->
<!--									点击注册会员<br>-->
<!--									尊享专属礼遇-->
<!--								</view>-->
<!--							</view>-->
<!--							<view class="user_level">-->
<!--								{{userLevelObj.str}}-->
<!--								&lt;!&ndash; 分享 [{{userLevelObj.need_member}}人] 入会且该{{userLevelObj.need_member}}人完成首次消费升级{{userLevelObj.next_level}}会员 &ndash;&gt;-->
<!--							</view>-->
<!--						</view>-->
<!--					</view>-->
					<!-- 图片展示 -->
					<view class="pic_list" style="margin-top: 50rpx">
						<view class="pic_item" v-for="(item, index) in classGoodsList" :key="index"  @tap="jump('/pages/goods/list',{id:item.id,title:item.name})">
							<image :src="item.image" mode="aspectFill" class="pic_item_img"></image>
							<text class="pic_item_text">{{item.name}}</text>
						</view>
					</view>
					<!-- 眼护 -->
					<view class="content-box" >
						<view class="content_title">
							眼护
						</view>
						<view class="content-img-wrap" v-for="(item,index) in eyeGoodsList" :key="index">
							<image class="content_img" :src="item.image" mode="aspectFill"></image>
							<view class="content_img_con">
								<view class="t0">{{item.title}}</view>
								<view class="t1">{{item.subtitle}}</view>
								<view class="t2">¥{{item.price}}</view>
								<view class="t3"  @click="jump('/pages/goods/detail',{id:item.id})">前往选购
								    <image class="t3_img" src="../../static/images/home/right_arrow.png" mode="aspectFill"></image>
								</view>
							</view>
						</view>
					</view>
					<!-- 面护 -->
					<view class="content-box" >
						<view class="content_title">
							面护
						</view>
						<view class="content-img-wrap" v-for="(item,index) in faceGoodsList" :key="index">
							<image class="content_img" :src="item.image" mode="aspectFill"></image>
							<view class="content_img_con">
								<view class="t0">{{item.title}}</view>
								<view class="t1">{{item.subtitle}}</view>
								<view class="t2">¥{{item.price}}</view>
								<view class="t3"  @click="jump('/pages/goods/detail',{id:item.id})">前往选购
									<image class="t3_img" src="../../static/images/home/right_arrow.png" mode="aspectFill"></image>
								</view>
							</view>
						</view>
					</view>

				</view>
			</view>
<!--   购物车的按钮-->
    <shopro-float-shopcart-btn></shopro-float-shopcart-btn>
			<!-- 登录提示 -->
			<shopro-auth-modal></shopro-auth-modal>
	</view>
</template>

<script>
import shBanner from './components/sh-banner.vue';
import shGridSwiper from './components/sh-grid-swiper.vue';

import { mapMutations, mapActions, mapState, mapGetters } from 'vuex';
export default {
	components: {
		shBanner,
		shGridSwiper
	},
	data() {
		return {
			isScorll: false,
			classGoodsList:[],
			headSwiperList:[],
			eyeGoodsList:[],
			faceGoodsList:[],
			userLevelObj:{}
		};
	},
	computed: {
		...mapGetters(['initShop', 'userTemplate', 'isLogin', 'userInfo', 'authType'])
	},
	onPullDownRefresh() {
		this.getuserLevelNeed()
	},
	onPageScroll(e) {
		this.isScorll = e.scrollTop > 100 ? true : false;
	},
	onShow() {
		console.log('this.isLogin',this.isLogin)
		if (this.isLogin) {
			this.getuserLevelNeed()
		}
	},
	onHide() {
	},
	onLoad() {
		this.init()
		this.gotoclass('eye')
		this.gotoclass('face')
	},
	methods: {
		...mapActions(['getUserInfo', 'showAuthModal', 'getUserData' ,'logout']),
		init(){
			this.$https('common.indexInfo', {}, '加载中...')
				.then(res => {
					if (res.code === 1) {
						this.headSwiperList=res.data.banners
						console.log("11111",this.headSwiperList)
						this.classGoodsList=res.data.category
					}
				})
		},
    gotohuiyuan(){
      uni.switchTab({url:'/pages/index/member'})
    },
		getuserLevelNeed(){
			this.$https('common.userLevelNeed',{}, '加载中...')
				.then(res => {
					if (res.code === 1) {
						this.userLevelObj=res.data
					}
				})
		},
		gotoclass(type){
			this.$https('common.indexGoods', {
				type:type
			}, '加载中...')
				.then(res => {
					if (res.code === 1) {
						if(type=='eye'){
							this.eyeGoodsList=res.data.data
						}else if(type=='face'){
						    this.faceGoodsList=res.data.data
						}
					}
				})

		},
		// 绑定手机号
		bindMobile() {
			this.showAuthModal('smsLogin');
		},
		jump(path, query) {
			this.$Router.push({
				path: path,
				query: query
			});
		}
	}
};
</script>

<style lang="scss">
	.home-wrap{
		.template-box{
			width: 100%;
			height: 500rpx;
		}
	}
	.vip_rights{
		.title{
			margin:50rpx 40rpx;
			.vip_rights_img{
				width: 100%;
				height: 42.5rpx;
			}
		}
	}
	.logo_card{
		margin:0 60rpx 50rpx;

		background: #000000;
		color:#ffffff;
		.card_box{
			width: 100%;
			display:flex;
			align-item:center;
			align-items: center;
			justify-content: space-evenly;
			height: 160rpx;
			.left{
				font-size:45rpx;
			}
			.right{
				font-size:35rpx;
				padding-left:50rpx;
				border-left:2.5rpx solid #ffffff;
				.t0{
					font-size: 24rpx;
				}
				.t1{
					text-decoration:underline;
				}
			}
		}
	    .user_level{
			padding: 0 20rpx 30rpx;
			font-size: 24rpx;
			text-align: center;
		}
	}
	.pic_list{
		margin-bottom:50rpx;
		display: flex;
		justify-content: space-evenly;
		.pic_item{
			text-align: center;
			display: flex;
			    flex-direction: column;
			.pic_item_img{
				width: 160rpx;
				height: 170rpx;
				margin-bottom:16rpx;
				border-radius: 10rpx;
			}
			.pic_item_text{
				color: #1B1C1E;
				font-size:28rpx;
			}
		}
	}
	.content-box{
		.content_title{
		    width: 100%;
			height:125rpx;
			background: #010101;
			text-align:center;
			line-height:125rpx;
			color:#ffffff;
		}
		.content-img-wrap{
			.content_img_con{
				margin-top:-10rpx;
				background: #DFE1E0;
				text-align:center;
				padding:50rpx 0;
				.t0{
					font-size: 40rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #010101;
					line-height: 40px;
					margin-bottom:10rpx;
				}
				.t1{
					font-size: 30rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #666666;
					line-height: 40rpx;
					margin-bottom:20rpx;
				}
				.t2{
					font-size: 40rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #010101;
					line-height: 40rpx;
					margin-bottom:40rpx;
				}
				.t3{
					width: 200rpx;
					height: 70rpx;
					margin:0 auto;
					background: #010101;
					font-size: 30rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #FFFFFF;
					line-height: 40rpx;
					    display: flex;
					    align-items: center;
					    justify-content: center;

				}
				.t3_img{
					margin-left:10rpx;
					width: 20rpx;
					height:12.5rpx;
				}
			}
			.content_img{
				width: 100%;
				height: 900rpx;
			}
		}
	}
</style>
